import {
  createStore
} from "./store";
const appState = {
  title: {
    text: 'React.js 小书',
    color: 'red'

  },
  content: {
    text: 'React.js 小书内容',
    color: 'blue'
  }
}

/**
 * 
 * @param {专门执行某些修改操作} action 
 */

// 合并state和stateChanger的以上功能，这样既充当了初始化数据的功能，也充当了更新数据的功能，如果传入有state就生成更新数据，否则就是初始化数据
// 我们给这样的一个stateChanger函数，起一个名字，就叫reducer
function stateChanger(state, action) {
  // 1 修改标题内容
  // 2 修改标题颜色
  if (!state) {
    return {
      title: {
        text: 'React.js 小书',
        color: 'red',
      },
      content: {
        text: 'React.js 小书内容',
        color: 'blue'
      }
    }
  }


  switch (action.type) {
    case 'UPDATE_TITLE_TEXT':
      return {
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
      case 'UPDATE_TITLE_COLOR':
        return {
          ...state,
          title: {
            ...state.title,
            color: action.color
          }
        }
        default:
          return state; // 没有修改返回原来的对象
  }

}

// 新增几个渲染函数，把内容渲染到页面上

function renderTitle(state, oldState = {}) {
  // 渲染标题

  if (oldState === state) {
    return;
  }
  console.log('渲染标题')

  let titleEle = document.querySelector('#title');
  titleEle.innerHTML = state.text;
  titleEle.style.color = state.color;
}

function renderContent(state, oldState = {}) {
  // 渲染内容

  if (state === oldState) return;
  console.log('渲染内容')
  let contentEle = document.querySelector('#content');
  contentEle.innerHTML = state.text;
  contentEle.style.color = state.color;
}


function renderApp(state, oldState = {}, ) {

  if (oldState === state) {
    return;
  }
  console.log('渲染app')
  renderTitle(state.title, oldState.title);
  renderContent(state.content, oldState.content)
}

// 执行函数


// 提升修改共享数据的成本，模块之前可以共享数据，也可以修改数据，但是我们约定，数据不能直接修改，你只能执行某些我允许某些修改，而且这些修改你必须大张旗鼓的告诉我
// dispatch 派遣 必须调用dispatch进行修改



// renderApp(appState) // 首次渲染页面

// dispatch({type:'UPDATE_TITLE_TEXT',text:'《React.js 小书》'})
// dispatch({type:'UPDATE_TITLE_COLOR',color:'blue'})

// renderApp(appState) // 把新的数据渲染到页面上

// 利用creaStore，接收一个初始state值和一个修改数据的函数，创造一个store对象，
let store = createStore( stateChanger)
let oldState = store.getState();
store.subscribe(() => {
  const newState = store.getState() // 数据可能变化，获取新的 state
  renderApp(newState, oldState)
  oldState = newState
})
renderApp(store.getState())

store.dispatch({
  type: 'UPDATE_TITLE_TEXT',
  text: '《React.js 小书》'
});
store.dispatch({
  type: 'UPDATE_TITLE_COLOR',
  color: 'blue'
});